<template>
  <el-form ref="form" class="dialogForm" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="质量问题分类" prop="typeNo">
          <treeselect v-model="form.typeNo" :options="deptOptions" :default-expand-level="100" placeholder="质量问题分类" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="问题等级" prop="questionLevel">
          <el-select v-model="form.questionLevel" placeholder="请选择质量问题等级">
            <el-option v-for="dict in dict.type.list_quality_level" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据来源" prop="dataSource">
          <el-select disabled v-model="form.dataSource" placeholder="请选择数据来源">
            <el-option v-for="dict in dict.type.list_quality_question_source" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="问题描述" prop="questionInfo">
      <el-input :autosize="{ minRows: 1, maxRows: 10 }" maxlength="255" type="textarea" 
        v-model="form.questionInfo" placeholder="请输入质量问题" />
    </el-form-item>
    <el-form-item label="成因" prop="questionOrigin">
      <el-input :autosize="{ minRows: 3, maxRows: 10 }" maxlength="255" type="textarea"
        v-model="form.questionOrigin" placeholder="请输入成因" />
    </el-form-item>
     <el-form-item label="规范依据" >
      <el-input :autosize="{ minRows: 3, maxRows: 10 }" maxlength="255" type="textarea"
        v-model="form.normativeBasis" placeholder="请输入规范依据" />
    </el-form-item>
    <el-form-item label="规范内容">
      <el-input :autosize="{ minRows: 3, maxRows: 10 }" maxlength="255" type="textarea"
        v-model="form.normativeInfo" placeholder="请输入规范内容" />
    </el-form-item>
    <el-form-item label="防治措施" prop="preventiveMeasures">
      <el-input :autosize="{ minRows: 3, maxRows: 10 }" maxlength="255" type="textarea"
        v-model="form.preventiveMeasures" placeholder="请输入防治措施" />
    </el-form-item>
   
    
    
    <el-form-item label="质量照片" prop="picName">
      <div class="block">
        <ImageUpload v-model="form.pics" ref="imageUpload"></ImageUpload>
      </div>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input :autosize="{ minRows: 3, maxRows: 10 }" maxlength="255" type="textarea" v-model="form.remark" placeholder="请输入备注" />
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input-number v-model="form.sort" :min="1" :max="100" label="排序" style="width: 305px"></el-input-number>
    </el-form-item>
  </el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { treeselect } from "@/api/list/type";
export default {
  name: "QuestionForm",
  dicts: ["list_quality_level", "list_quality_question_source"],
  props: {
    data: {
      type: Object,
      default: () => { }
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      deptOptions: undefined,
      form: {},
      // 表单校验
      rules: {
        typeNo: [
          { required: true, message: "参建单位不能为空", trigger: "blur" },
        ],
        questionLevel: [
          { required: true, message: "质量问题等级不能为空", trigger: "blur" }
        ],
        dataSource: [
          { required: true, message: "数据来源不能为空", trigger: "blur" }
        ],
        normativeBasis: [
          { required: true, message: "规范依据不能为空", trigger: "blur" }
        ],
        normativeInfo: [
          { required: true, message: "规范内容不能为空", trigger: "blur" }
        ],
        questionInfo: [
          { required: true, message: "质量问题不能为空", trigger: "blur" }
        ],
        questionOrigin: [
          { required: true, message: "成因不能为空", trigger: "blur" }
        ],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
      },
    }
  },
  created() {
    this.getDeptTree();
    this.initData();
  },
  methods: {
    getDeptTree() {
      treeselect({typeNo: null}).then((response) => {
        this.deptOptions = response.data;
      });
    },
    initData() {
      this.reset();
      Object.keys(this.data).forEach(key => {
        this.form[key] = this.data[key]
      })
    },
    reset() {
      this.form = {
        id: null,
        typeNo: null,
        questionInfo: null,
        questionOrigin: null,
        preventiveMeasures: null,
        questionLevel: null,
        normativeBasis: null,
        normativeInfo: null,
        dataSource: "质量问题提取",
        pic: [],
        remark: null,
        sort: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    getFormData() {
      return JSON.parse(JSON.stringify(this.form))
    },
    validate() {
      return new Promise(resolve => {
        this.$refs.form.validate(async valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>